

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            margin: 5px
        }
    </style>
</head>
<body>

    <div style="height:120px;width:120px;border:1px solid" >
        div1
        <div style="height:80px;width:70px;border:1px solid" >
            div2
            <div style="height:50px;width:50px;border:1px solid" >
                div3
            </div>
        </div>
    </div>

    <script>

        var divs = document.getElementsByTagName("div")
        var div1 = divs[0]
        var div2 = divs[1]
        var div3 = divs[2]

        div1.onclick=function(){
            console.log("div1")
            setTimeout(()=>{
                console.log("setTimeout1")
            })
        }
        div2.onclick=function(){
            console.log("div2")
            setTimeout(()=>{
                console.log("setTimeout2")
            })
        }
        div3.onclick=function(){
            console.log("div3")
            setTimeout(()=>{
                console.log("setTimeout3")
            })
        }


    </script>
    
</body>
</html>